<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            #jingubang {
                height: 3000px;
            }
    </style>
</head>
<body>
      <div id="jingubang"></div>
</body>
</html>
<script>
    //封装：随机数封装，随机颜色封装
    //JQuery：封装了非常多的功能；
    //封装的功能：降低程序开发的成本；
    //写代码速度快；

    //1.具有高度的复用性；
    //2.编写代码过程比较复杂；

    //函数节流if  函数去抖 clearInterval;
    //封装使用要简单 ，封装语义化要明确清晰；
    //封装遇到困难；
    //目标很明确，函数节流和函数去抖，都是做函数的调用处理
    
    // 函数调用时 : 1. 调用时机(啥时候调用); 2. 调用时的this指向;

    // 函数节流;    
    //callback   节流的函数;
    //delay     节流延迟时间;
    //context    函数调用时this的指向;
    // function throttling( callback , delay , context){

    // }
    // 函数去抖;
    // function dithering(  callback , delay , context ){

    // }

    // 节流;
    // var t = null;
    // document.onscroll = function(){
    //       if( t !== null){
    //             return false;
    //       }

    //       t = setTimeout( function(){
    //             console.log("消耗性能的行为");
    //             t = null;
    //       } , 500)
    // }


    // 去抖
    // var t2 = null;
    // document.onscroll = function(){

    //       clearInterval(t2)

    //       t2 = setTimeout( function(){
    //             console.log("消耗性能的行为");
    //             t = null;
    //       } , 500)
    // }

    // 无论是节流还是去抖, 都是在执行某个函数;
    // 1. 判断函数;
    // 2. 功能函数;

    // function throttling(callback, delay, context) {

    //       delay = delay || 100;
    //       // 在封装的时候不能使用全局变量;
    //       // 在内部制造一个自由变量;
    //       var t = null;
    //       return function () {
    //             // 判断函数;  执行频率非常高;
    //             if (t !== null) {
    //                   return false;
    //             }
    //             t = setTimeout(function () {
    //                   t = null;
    //                   // 因为提供了更改 context 的功能,所以我们不能直接调用,
    //                   // 我们应该让程序可以设置context属性，加上一个逻辑;
    //                   context ? callback.call(context) : callback();
    //                   // 执行间隔;
    //             }, delay)
    //       }
    // }

    // document.onscroll = throttling(function () {
    //       console.log("性能消耗较大的函数");
    // }, 200)


    // function dithering(callback, delay, context) {

    //       delay = delay || 100;
    //       // 在封装的时候不能使用全局变量;
    //       // 在内部制造一个自由变量;
    //       var t = null;
    //       return function () {
    //             // 判断函数;  执行频率非常高;
    //             clearInterval( t );
    //             t = setTimeout(function () {
    //                   t = null;
    //                   // 因为提供了更改 context 的功能,所以我们不能直接调用,
    //                   // 我们应该让程序可以设置context属性，加上一个逻辑;
    //                   context ? callback.call(context) : callback();
    //                   // 执行间隔;
    //             }, delay)
    //       }
    // }

    // function supFun (callback, delay, type ,context){
    //       delay = delay || 100;
    //       // 在封装的时候不能使用全局变量;
    //       // 在内部制造一个自由变量;
    //       var t = null;
    //       return function () {
    //             // 判断函数;  执行频率非常高;
    //             // th  节流;
    //             // dit 去抖;
    //             // if(type === "th"){
    //             //       if( t !== null){
    //             //             return false;
    //             //       }
    //             // }else if( type === "dit"){
    //             //       clearInterval(t);
    //             // }
    //             // 该用switch就用swtich; 
    //             // 优化成 switch : 
    //             // 1. 方便迭代;
    //             // 2. 结构有区别,方便阅读;
                        
    //             switch(type){
    //                   case "th" : 
    //                         if( t !== null){
    //                               return false;
    //                         }
    //                         break;
    //                   case "dit" : 
    //                         clearInterval(t);
    //                         break;
    //             }

    //             t = setTimeout(function () {
    //                   t = null;
    //                   // 因为提供了更改 context 的功能,所以我们不能直接调用,
    //                   // 我们应该让程序可以设置context属性，加上一个逻辑;
    //                   context ? callback.call(context) : callback();
    //                   // 执行间隔;
    //             }, delay)
    //       }
    // }

    // document.onscroll = supFun( function(){
    //       console.log("消耗性能的程序" , this);
    // }, 200 , "th" , document );
</script>
